<template>
	<view class="container">
		<view class="content">
			<view class="card_box examine_status">
				<view class="examine_status_text">
					<view class="" v-if="modifyFnc.modifyData.status==0">审核中</view>
					<view class="" v-else-if="modifyFnc.modifyData.status==1">修改成功</view>
					<view class="" v-else>修改失败</view>
					<text v-if="modifyFnc.modifyData.status == 1">2024-03-18 11:20</text>
				</view>
				<view class="examine_status_tips" v-if="modifyFnc.modifyData.status != 1 ">
					<template v-if="modifyFnc.modifyData.status==0">商家正在审核，请耐心等待</template>
					<template v-else>
						原因：{{modifyFnc.modifyData.reason}}
					</template>

				</view>
			</view>
			<view class="card_box address_info">
				<view class="card_title">地址变更</view>
				<view class="address_info_item">
					<view class="address_info_item_label">
						新地址
					</view>
					<view class="address_info_item_value">
						<view class="address_info_item_value_top">
							<text>{{modifyFnc.modifyData.afterModifyReceiverName}}</text>{{modifyFnc.modifyData.afterModifyReceiverMobile}}
						</view>
						<view class="address_info_item_value_bottom">
							{{modifyFnc.modifyData.afterModifyReceiverProvince}}{{modifyFnc.modifyData.afterModifyReceiverCity}}{{modifyFnc.modifyData.afterModifyReceiverArea}}{{modifyFnc.modifyData.afterModifyReceiverLocationAddress}}{{modifyFnc.modifyData.afterModifyReceiverAddress}}
						</view>
					</view>
				</view>
				<view class="address_info_item">
					<view class="address_info_item_label">
					</view>
					<view class="address_info_item_value split_line">
					</view>
				</view>
				<view class="address_info_item">
					<view class="address_info_item_label">
						原地址
					</view>
					<view class="address_info_item_value">
						<view class="address_info_item_value_top">
							<text>{{modifyFnc.modifyData.beforeModifyReceiverName}}</text>{{modifyFnc.modifyData.beforeModifyReceiverMobile}}
						</view>
						<view class="address_info_item_value_bottom">
							{{modifyFnc.modifyData.beforeModifyReceiverProvince}}{{modifyFnc.modifyData.beforeModifyReceiverCity}}{{modifyFnc.modifyData.beforeModifyReceiverArea}}{{modifyFnc.modifyData.beforeModifyReceiverLocationAddress}}{{modifyFnc.modifyData.beforeModifyReceiverAddress}}
						</view>
					</view>
				</view>
			</view>
			<view class="card_box modify_record">
				<view class="card_title">修改记录</view>
				<view class="modify_record_item">
					<view class="modify_record_item_icon">
						<view class="modify_record_item_icon_top"></view>
						<view class="modify_record_item_icon_bottom"></view>
					</view>
					<view class="modify_record_item_value">
						<view class="modify_record_status">
							<view class="modify_record_status_text">
								<template v-if="modifyFnc.modifyData.status==0">
									【地址修改-审核中】
								</template>
								<template v-if="modifyFnc.modifyData.status==1">
									【地址修改成功】
								</template>
								<template v-if="modifyFnc.modifyData.status==2">
									【地址修改失败】
								</template>
							</view>
							<view class="modify_record_status_times">2024-03-18 11:20</view>
							<view class="modify_record_status_tips">
								<template v-if="modifyFnc.modifyData.status==0">
									商家正在审核，请耐心等待
								</template>
								<template v-if="modifyFnc.modifyData.status==2">
									原因：{{modifyFnc.modifyData.reason}}
								</template>

							</view>
						</view>
					</view>
				</view>
				<view class="modify_record_item">
					<view class="modify_record_item_icon">
						<view class="modify_record_item_icon_top"></view>
						<view class="modify_record_item_icon_bottom"></view>
					</view>
					<view class="modify_record_item_value">
						<view class="modify_record_status modify_record_post">
							<view class="modify_record_status_text">【用户申请修改地址】</view>
							<view class="modify_record_status_times">{{modifyFnc.modifyData.createTime}}</view>
						</view>
					</view>
				</view>
				<view class="modify_record_item">
					<view class="modify_record_item_icon">
						<view class="modify_record_item_icon_bottom"></view>
					</view>
					<view class="modify_record_item_value">
						<view class="item_value_address">
							<view class="item_value_address_title">新地址</view>
							<view class="item_value_address_top">
								{{modifyFnc.modifyData.afterModifyReceiverProvince}}{{modifyFnc.modifyData.afterModifyReceiverCity}}{{modifyFnc.modifyData.afterModifyReceiverArea}}
							</view>
							<view class="item_value_address_content">
								{{modifyFnc.modifyData.afterModifyReceiverLocationAddress}}{{modifyFnc.modifyData.afterModifyReceiverAddress}}
							</view>
							<view class="item_value_address_bttom">{{modifyFnc.modifyData.afterModifyReceiverName}}
								{{modifyFnc.modifyData.afterModifyReceiverMobile}}
							</view>
						</view>
						<view class="item_value_address">
							<view class="item_value_address_title">原地址</view>
							<view class="item_value_address_top">
								{{modifyFnc.modifyData.beforeModifyReceiverProvince}}{{modifyFnc.modifyData.beforeModifyReceiverCity}}{{modifyFnc.modifyData.beforeModifyReceiverArea}}
							</view>
							<view class="item_value_address_content">
								{{modifyFnc.modifyData.beforeModifyReceiverLocationAddress}}{{modifyFnc.modifyData.beforeModifyReceiverAddress}}
							</view>
							<view class="item_value_address_bttom">{{modifyFnc.modifyData.beforeModifyReceiverName}}
								{{modifyFnc.modifyData.beforeModifyReceiverMobile}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card_box examine_id">
				<view class="examine_id_title">编号</view>
				<view class="examine_id_title_text"><text class="examine_id_num">{{modifyFnc.modifyData.id}}</text> |
					<text class="examine_id_copy" @tap="modifyFnc.copyBtn(modifyFnc.modifyData.id)">复制</text>
				</view>
			</view>
		</view>

		<view class="bottom_btn">
			<view class="xjs-btn-primary-plain" v-if="modifyFnc.wid">重新修改地址</view>
			<view class="xjs-btn-primary" @tap="modifyFnc.goBack">返回订单</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import api from '@/api'
	import { reactive, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	onLoad(async (options) => {
		modifyFnc.orderId = options.orderId
		await modifyFnc.getModifyData(options.orderId)
	})
	onShow(() => {

	})
	const modifyFnc = reactive({
		modifyData: {},
		orderId: '',
		wid: false,
		getModifyData: async (orderId) => {
			const res : any = await api({
				method: 'get',
				url: `/mall/shopping/order/getModifyRecord/${orderId}`
			})
			if (res.data) {
				modifyFnc.modifyData = res.data
				if (res.data.status == 2 && (res.data.orderStatus === 0 || res.data.orderStatus == 1)) {
					modifyFnc.wid = true
				} else {
					modifyFnc.wid = false
				}
			}
		},
		copyBtn: async (data) => {
			uni.setClipboardData({
				data,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					});
				}
			});
		},
		goBack: () => {
			uni.navigateBack()
		}
	})
</script>

<style lang="less" scoped>
	.container {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		min-height: 100vh;
		background-color: #F9F6F6;
	}

	.content {
		width: 686rpx;
		margin: 0 auto;
		padding-top: 32rpx;
	}

	.card_box {
		margin-bottom: 24rpx;
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 24rpx;

		.card_title {
			margin-bottom: 40rpx;
			font-size: 36rpx;
			color: #1B2120;
			font-weight: bold;
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #E4E6E6;
		}
	}

	.examine_status {
		.examine_status_text {
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 1;

			view {
				font-size: 36rpx;
				font-weight: bold;
				color: #1B2120;
			}

			text {
				font-size: 26rpx;
				color: #7C807F;
			}
		}

		.examine_status_tips {
			margin-top: -6rpx;
			line-height: 1.4;
			color: #5C5E5E;
			word-break: break-all;
		}
	}

	.address_info {

		.address_info_item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.address_info_item_label {
				font-size: 26rpx;
				color: #5C5E5E;
				font-weight: bold;
				line-height: 1;
			}

			.address_info_item_value {
				width: 468rpx;
				padding: 0 10rpx;
				box-sizing: border-box;

				.address_info_item_value_top {
					margin-bottom: 24rpx;
					line-height: 1;
					font-size: 26rpx;
					color: #5C5E5E;

					text {
						font-weight: bold;
						font-size: 30rpx;
						color: #1B2120;
					}
				}

				.address_info_item_value_bottom {
					margin-top: -6rpx;
					line-height: 1.4;
				}

			}

			.split_line {
				margin: 34rpx 0 40rpx 0;
				height: 1rpx;
				background-color: #E4E6E6;
			}
		}
	}


	.modify_record {
		.modify_record_item {
			display: flex;
			justify-content: space-between;

			.modify_record_item_icon {
				width: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.modify_record_item_icon_top {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50rpx;
					background-color: #D0D1D2;
				}

				.modify_record_item_icon_bottom {
					width: 2rpx;
					height: 100%;
					background-color: #E4E6E6;
				}
			}

			.modify_record_item_value {
				width: 558rpx;

				.modify_record_status {
					line-height: 1;
					padding-bottom: 80rpx;

					.modify_record_status_text {
						margin-bottom: 16rpx;
						font-size: 30rpx;
						color: #1B2120;
						font-weight: bold;
					}

					.modify_record_status_times {
						font-size: 26rpx;
						color: #7C807F;
					}

					.modify_record_status_tips {
						margin-top: 18rpx;
						line-height: 1.4;
						word-break: break-all;
						font-size: 30rpx;
						color: #7C807F;
					}
				}

				.modify_record_post {
					padding-bottom: 24rpx;
				}

				.item_value_address {
					margin-bottom: 24rpx;
					padding: 32rpx;
					background-color: #F9F6F6;
					border-radius: 24rpx;
					box-sizing: border-box;
					line-height: 1;

					.item_value_address_title {
						margin-bottom: 32rpx;
						padding-bottom: 32rpx;
						border-bottom: 1rpx solid #E4E6E6;
						font-size: 30rpx;
						color: #1B2120;
						font-weight: bold;
					}

					.item_value_address_top {
						font-size: 26rpx;
						color: #5C5E5E;

					}

					.item_value_address_content {
						margin: 10rpx 0 26rpx 0;
						font-size: 30rpx;
						color: #1A1A1A;
						line-height: 1.4;

					}

					.item_value_address_bttom {
						font-size: 26rpx;
						color: #5C5E5E;
					}
				}

				.item_value_address:last-child {
					margin-bottom: 0;
				}
			}

		}
	}

	.examine_id {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1;

		.examine_id_title {
			font-size: 28rpx;
			color: #5C5E5E;
		}

		.examine_id_title_text {
			font-size: 28rpx;
			color: #1B2120;

			.examine_id_num {}

			.examine_id_copy {
				color: #FF6084;
				text-decoration: underline;
			}
		}
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 8rpx 32rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1rpx solid #E6F6F6;
	}
</style>